
<template>
 
  <div class="page">
     <Header></Header>
     <div class="block">
    <el-carousel height="470px">
      <el-carousel-item v-for="(item,index) in sliders" :key="index">
        <a :href="item.url"><img :src="item.litpic" alt="" style="width:100%; height:100%" ></a>
      </el-carousel-item>
    </el-carousel>
  </div>
    <!-- banner -->
    <!-- <div class="banner">
      <img src="@/assets/images/banner.png" alt="" />
    </div> -->
    <div class="bgcolor">
      <div class="wrap">
        <div class="notice">
          <div class="bg">通知公告</div>
          <div>
            商会经济是平台经济，打造具有成长潜能的生
            <img
              src="@/assets/images/new_icon.png"
              alt=""
              style="display: inline-block"
            />
          </div>
        </div>
        <div class="list">
           <el-carousel type="card" indicator-position="outside">
              <el-carousel-item v-for="(item,index) in colleges" :key="index" >
                <img :src="item.logo" :alt="item.name" style="max-width:100%" @click="getItem(item.id)"/>
              </el-carousel-item>
            </el-carousel>
          <!-- <ul> -->
            
            <!-- <li v-for="(item,index) in colleges" :key="index" @click="getItem(item.id)" >
              <img :src="item.logo" :alt="item.name" />
              <div class="text">
                <p class="title">{{item.name}}</p>
                <p class="english">Security Ac- ademy</p>
                <a href="">立即进入</a>
              </div>
            </li> -->
          <!-- </ul> -->
        </div>
      </div>
    </div>
    <div class="wrap">
      <!-- 精选好课 -->
      <div class="conten_list">
        <div class="public_title">
          <h2>精选好课</h2>
          <span>Select good courses</span>
           <router-link :to="{path: '/more', query: {type:1}}" class="more">查看更多>></router-link>
        </div>
        <ul class="courses_list">
          <li v-for="(item,index) in courses" :key="index">
            <img :src="item.litpic" alt="" />
            <dl>
              <dt>{{item.title}}</dt>
              <dd><a @click="goPlay(item.id)">立即观看</a></dd>
            </dl>
          </li>
        </ul>
      </div>
      <!-- 限时课程 -->
      <div class="conten_list">
        <div class="public_title">
          <h2>限时课程</h2>
          <span>Limited time course</span>
          <router-link :to="{path:'/more',query:{type:2}}" data-type="2" @click="goMore" class="more">查看更多>></router-link>
        </div>
        <ul class="courses_list">
          <li v-for="(item,index) in timecourse" :key="index">
            <img :src="item.litpic" alt="" />
            <dl>
              <dt>{{item.title}}</dt>
              <dd><a  @click="goPlay(item.id)">立即观看</a></dd>
            </dl>
          </li>
        </ul>
      </div>
    </div>
    <div class="bgpic">
      <div class="wrap">
        <div class="public_title">
          <h2>师资力量</h2>
          <span>Teachers</span>
        </div>
        <div class="teachers">
          <ul class="cleaxfix">
           <li v-for="(item,index) in teachers" :key='index'> <img :src="item.litpic" alt="" />
            <p class="martop teachers_name"><span class="name">{{item.title}}</span></p>
            <p class="martop">{{item.description}}</p>
          </li>
        </ul>
        </div>
        
      </div>
    </div>
    <div class="wrap">
      <div class="learning">
        <div class="public_title">
          <h2>学习流程</h2>
          <span>Learning process</span>
        </div>
        <div class="process"><img src="@/assets/images/process.png" alt="" style="height:235px"></div>
      </div>
      <div class="about">
        <div class="public_title">
          <h2>关于晋泰</h2>
          <span>About Jin Tai</span>
        </div>
        <ul class="clearfix">
          <li v-for="(item,index) in environment" :key='index'><img :src="item.litpic" alt=""  style="width:100%"/><div class="bgtit"><span>环境展示</span></div></li>
        </ul>
      </div>
      <div class="cooperation">
         <div class="public_title">
          <h2>合作企业</h2>
          <span>Expert style</span>
        </div>
        <ul class="clearfix">
          <li v-for="item in company" :key="item.id" :id="item.id"> <img :src="item.litpic" :alt="item.title"  style="max-width:100%"/><span>{{item.title}}</span></li>
        </ul>
        <!-- <el-carousel :interval="4000" type="card" arrow="always" height="300px" ref="carousel">
        <el-carousel-item v-for="item in company" :key="item.id" :id="item.id">
          <img :src="item.litpic" :alt="item.title" />
        </el-carousel-item>
      </el-carousel> -->
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
 
<script>
import Header from '@/components/layout/header.vue'
import Footer from '@/components/layout/footer.vue'
// import {getindex}  from '@/api/data.js'
export default {
  components:{
    Header,Footer
  },
  name: "Home",
  data() {
    return {
      sliders: [],
      company:[],
      teachers:[],
      environment:[],
      courses:[],
      timecourse:[],
      colleges:[
        {
          pic:"",
          text:'',
          button:''
        }
      ]
    }
  },
   mounted() {
       this.getData();
       this.getCollege()
      },
  methods:{
    getData(){
     this.$axios.post('/api/index/index').then(res=>{
      //  console.log(res.data.data.banner)
       this.sliders = res.data.data.banner
       this.company = res.data.data.company
       this.teachers = res.data.data.teach
       this.environment = res.data.data.environment
       this.courses = res.data.data.jp_kc
       this.timecourse=res.data.data.xs_kc
      //  console.log(res)
     })
    },
    getCollege(){
      this.$axios.post('/api/Course/getAcademy').then(res=>{
        this.colleges = res.data.data
        // console.log(res.data)
      })
    },
    getItem(id){
     this.$router.push({
       path:'college',
       query:{pid:id}
     })
    },
    goMore(e){
      // console.log(e)
      let type = e.srcElement.dataset.type
      this.$router.push({path:'more/${type}'})
    },
     goPlay(id){
     this.$router.push({
       path:'playVideo',
       query:{id:id}
     })
    },
  }
};
</script>

<style  scoped>
a {
  color: #4398f8;
  font-size: 18px;
}

/* .banner {
  width: 100%;
  overflow: hidden;
} */
.bgcolor {
  margin: 0 auto;
  background: #f5f5f5;
  padding-bottom: 50px;
  text-align: center;
}
.notice {
  display: flex;
  padding: 50px 0 30px;
  align-items: center;
}
.notice .bg {
  background: url(../assets/images/noticebg.png) no-repeat;
  width: 109px;
  height: 44px;
  line-height: 44px;
  margin-right: 10px;
  color: #fff;
}
.courses_list {
  display: flex;
  margin-bottom: 30px;
  
}

.public_title {
  display: flex;
  align-items: baseline;
  position: relative;
  margin: 20px 0;
}
.public_title h2 {
  font-size: 36px;
  margin-right: 10px;
  font-weight: normal;
}
.public_title h2::before{
  content: '';
  width: 6px;
  height: 36px;
  display: inline-block;
  background: #4398F8;
  margin-right: 15px;
  vertical-align: middle;
}
.public_title span {
  text-transform: uppercase;
  font-size: 24px;
}
.public_title .more {
  position: absolute;
  right: 0;
  bottom: 0;
}
.courses_list li img{
  height: 210px;
}
.courses_list li {
  width: 280px;
  margin-right: 20px;
}
.courses_list li:last-child,.list ul li:last-child {
  margin-right: 0;
}
.courses_list li dl {
  text-align: left;
  box-shadow: 0px 3px 18px 0px rgba(59, 59, 59, 0.22);
  padding: 10px;
  box-sizing: border-box;
}
.courses_list li dl dt {
  font-size: 18px;
}
.bgpic {
  background: url("../assets/images/bgpic.png") no-repeat;
  background-size: cover;
  height: 608px;
  padding: 30px 0;
  box-sizing: border-box;
}
.teachers ul li{
  float: left;
  width: 16%;
  overflow: hidden;
  font-size: 12px;
  margin-right: 20px;
}
.teachers ul li img{
  min-height: 240px;
  max-width: 100%;}
.teachers ul li:last-child{
  margin-right: 0;
}
.martop{margin-top: 10px;}
.teachers_name .name{ font-size: 18px;margin-right: 10px;}
.col9{ color: #999;}
.process{margin: 50px 0;}
.about ul li{
  width: 580px;
  height: 328px;
  margin:0 20px 20px 0;
  float: left;
  overflow: hidden;
  position: relative;
}
.about ul li::nth-child(2){
   margin: 0;
}
.about{
  margin: 50px auto;
}
.about ul li .bgtit{
  display: block;
  position: absolute;
  z-index: 9;
  height: 96px;
  line-height: 96px;
  background-color: rgba(0, 0, 0, 0.8);
  font-size: 24px;
  text-align: center;
    bottom: 0;
    width: 100%;
}
.about ul li .bgtit span {
   color: #fff;
}

.fixed_area{
 position: fixed;
 top: 300px;
}
</style>
<style>

.list .el-carousel__button{
  background-color:#000;
  border: 1px solid #000;
  width: 14px;
  height: 14px;
  border-radius: 50%;
}
.cooperation ul li{
  width: 25%;
  float: left;
}
.cooperation ul li img{
    width: 212px;
    min-height: 120px;
    max-height: 141px;
}
.cooperation ul li span{
  font-size: 20px;
  display: block;
  margin-bottom: 10px;
}
/* .cooperation .el-carousel__button{
  background-color:transparent;
  border: 1px solid transparent;
} */
</style>